<template>
  <div id="components-slider-demo-mark">
    <h4>included=true</h4>
    <CloudSlider :marks="marks" :default-value="37" />
    <CloudSlider range :marks="marks" :default-value="[26, 37]" />

    <h4>included=false</h4>
    <CloudSlider :marks="marks" :included="false" :default-value="37" />

    <h4>marks & step</h4>
    <CloudSlider :marks="marks" :step="10" :default-value="37" />

    <h4>step=null</h4>
    <CloudSlider :marks="marks" :step="null" :default-value="37" />
  </div>
</template>

<script>
  export default {
    title: '8.带标签的滑块',
    subTitle: '使用 marks 属性标注分段式滑块，使用 value / defaultValue 指定滑块位置。当 included=false 时，表明不同标记间为并列关系。当 step=null 时，Slider 的可选值仅有 marks 标出来的部分。',
    data () {
      return {
        marks: {
          0: '0°C',
          26: '26°C',
          37: '37°C',
          100: {
            style: {
              color: '#f50',
            },
            label: <strong>100°C</strong>,
          },
        },
      }
    },
    methods: {
      onChange (value) {
        console.log('change: ', value);
      },
      onAfterChange (value) {
        console.log('afterChange: ', value);
      },
    }
  }
</script>

<style lang="scss">
  #components-slider-demo-mark h4 {
    margin: 0 0 16px;
  }
  #components-slider-demo-mark .ant-slider-with-marks {
    margin-bottom: 44px;
  }
</style>